<template>
  <view class="calendar-container">
    <!-- 年月选择 -->
    <view class="calendar-header">
      <view class="nav-button" @click="prevMonth">←</view>
      <view class="current-month">{{ currentYear }}年{{ currentMonth }}月</view>
      <view class="nav-button" @click="nextMonth">→</view>
    </view>
    
    <!-- 星期标题 -->
    <view class="weekdays">
      <view class="weekday" v-for="day in weekdays" :key="day">{{ day }}</view>
    </view>
    
    <!-- 日历主体 -->
    <view class="calendar-body">
      <view class="calendar-row" v-for="(week, weekIndex) in calendarDays" :key="weekIndex">
        <view 
          class="calendar-day" 
          v-for="(day, dayIndex) in week" 
          :key="dayIndex"
          @click="selectDate(day)"
        >
          <view 
            class="day-content"
            :class="{
              'selected': isSelected(day),
              'today': isToday(day),
              'other-month': day.isOtherMonth
            }"
          >
            <!-- 当前日期显示可爱图标 -->
            <view v-if="isToday(day) && !isSelected(day)" class="today-icon">🌟</view>
            
            <!-- 普通日期显示 -->
            <text v-else>{{ day.date }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 已选日期显示 -->
    <view class="selected-date">
      已选择: {{ selectedDate.year }}年{{ selectedDate.month }}月{{ selectedDate.day }}日
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomCalendar",
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      selectedDate: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate()
      },
      weekdays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    calendarDays() {
      const days = []
      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1)
      const lastDay = new Date(this.currentYear, this.currentMonth, 0)
      const prevMonthLastDay = new Date(this.currentYear, this.currentMonth - 1, 0).getDate()
      
      // 获取当月第一天是星期几
      const firstDayOfWeek = firstDay.getDay()
      
      // 上个月的日期
      for (let i = firstDayOfWeek - 1; i >= 0; i--) {
        const day = prevMonthLastDay - i
        days.push({
          date: day,
          month: this.currentMonth === 1 ? 12 : this.currentMonth - 1,
          year: this.currentMonth === 1 ? this.currentYear - 1 : this.currentYear,
          isOtherMonth: true
        })
      }
      
      // 当前月的日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        days.push({
          date: i,
          month: this.currentMonth,
          year: this.currentYear,
          isOtherMonth: false
        })
      }
      
      // 下个月的日期（补齐6行）
      const remainingDays = 42 - days.length // 6行 × 7天 = 42
      for (let i = 1; i <= remainingDays; i++) {
        days.push({
          date: i,
          month: this.currentMonth === 12 ? 1 : this.currentMonth + 1,
          year: this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear,
          isOtherMonth: true
        })
      }
      
      // 分割成6行7列
      const weeks = []
      for (let i = 0; i < 6; i++) {
        weeks.push(days.slice(i * 7, (i + 1) * 7))
      }
      
      return weeks
    }
  },
  methods: {
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentMonth = 12
        this.currentYear--
      } else {
        this.currentMonth--
      }
    },
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentMonth = 1
        this.currentYear++
      } else {
        this.currentMonth++
      }
    },
    selectDate(day) {
      if (!day.isOtherMonth) {
        this.selectedDate = {
          year: day.year,
          month: day.month,
          day: day.date
        }
        
        // 触发日期选择事件
        this.$emit('dateSelected', this.selectedDate)
      }
    },
    isSelected(day) {
      return (
        day.date === this.selectedDate.day &&
        day.month === this.selectedDate.month &&
        day.year === this.selectedDate.year
      )
    },
    isToday(day) {
      const today = new Date()
      return (
        day.date === today.getDate() &&
        day.month === today.getMonth() + 1 &&
        day.year === today.getFullYear() &&
        !day.isOtherMonth
      )
    }
  }
}
</script>

<style scoped>
.calendar-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.nav-button {
  font-size: 36rpx;
  padding: 10rpx;
  color: #007aff;
}

.current-month {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.weekdays {
  display: flex;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.weekday {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: #666;
}

.calendar-row {
  display: flex;
  margin-bottom: 10rpx;
}

.calendar-day {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.day-content {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 28rpx;
  transition: all 0.3s;
}

.day-content.other-month {
  color: #ccc;
}

.day-content.today {
  background-color: #ffeb3b;
  color: #333;
  font-weight: bold;
}

.day-content.selected {
  background-color: #007aff;
  color: white;
  font-weight: bold;
  border: 4rpx solid #007aff;
  box-sizing: border-box;
}

.today-icon {
  font-size: 36rpx;
}

.selected-date {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f0f8ff;
  border-radius: 10rpx;
  text-align: center;
  color: #007aff;
  font-weight: bold;
}
</style>
